<template>
    <div class="center-box">
        <div class="title">
            <img src="../../assets/hqrepair/title-bg.png">
            <span class="txt">维修实时数据</span>
        </div> 
       <BgTable :config="myConfig" :t="t" :key="t" :style="{width:'95%',height:'85%'}"  />
    </div>
</template>
<script>
import BgTable from './components/BgTable.vue'
export default {
    data() {
        return {
            myConfig:{}
        }
    },
    components: {
        BgTable
    },
    props: {
        data: {
            type: Array,
            default: () => ([])
        },
        t: {
            type: String,
            default: '0'
        }
    },
    watch: {
        data: {
            handler(data) {
                this.formatConfig(data)
                this.$forceUpdate();
            },
            deep: true
        },
        t: {
            handler(t) {
               this.$forceUpdate();
            },
            deep: true
        },
    },
    mounted(){
        this.formatConfig(this.data)
    },
    methods:{
        formatConfig(rows){
            let cof={};
            for(let i=0;i<rows.length;i++){
                for(let j=0;j<rows[i].length;j++){
                    if(j==3){
                        rows[i][j] = this.getHtml(rows[i][j]);
                    }
                }
            } 
            cof.headerBGC = 'transparent';
            cof.oddRowBGC = '#0F2673CC';
            cof.evenRowBGC = '#18479BCC';
            cof.rowNum = 5;
            cof.waitTime = 1000;
            cof.columnWidth=[140,160,120,120,150];
            cof.data = rows;
            cof.align = ['left', 'center', 'left', 'center', 'left'];
            cof.header = ['地点', '时间', '项目', '状态', '责任部门'];
            this.myConfig = cof;
        },
        getHtml(status){
            let html = '';
            if(status=="待受理"){
                html='<span class="status dcl">待受理</span>'
            }else if(status=='待归档'){
                html='<span class="status dqr">待归档</span>'
            }else if(status=="结束"){
                html='<span class="status ycl">结束</span>'
            }else{
                html='<span class="status other">'+status+'</span>'
            }
            return html;
        }
    }
}
</script>

<style lang="scss" scoped>
$box-width: 100%;
$box-height: 100%;
$box_padding_tb:20px;
.center-box {
    height: $box-height;
    width: $box-width;
    .title {
        position: relative;
        font-size: 1.2vw;
        line-height: 2vw;
        text-shadow: 2px 1px 0px rgba(0, 31, 61, 0.46);
        color: #fff;
        font-family: DingTalk JinBuTi;
        margin-top: -0.5vw;
        img{
            height: 2vw;
        }
        .txt{
            position: absolute;
            left: 20px;
            top: -0.2vw;
        }
    }
    .table-box{
        width: 100%;
        height: 85%;
        color: transparent;
    } 
}
</style>